表单控件(Form control)

您所在的位置:网站首页 form p 表单控件(Form control)

表单控件(Form control)

#表单控件(Form control)| 来源: 网络整理| 查看: 265

例子 Email address Example textarea 大小

使用诸如.form-control-lg 和 .form-control-sm之类的类设置高度。

禁用

在输入上添加禁用的布尔属性disabled,使其显示为灰色,并删除指针事件。

只读

在输入上添加readonly 属性以防止修改输入的值。只读输入看起来更轻(就像禁用的输入一样),但保留标准光标。

只读纯文本

如果要将表单中的 元素设置为纯文本样式,请使用.form-control-plaintext纯文本类删除默认表单字段样式并保留正确的边距和填充。

Email Password Email Password Confirm identity 文件输入 Default file input example Multiple files input example Disabled file input example Small file input example Large file input example 颜色 Color picker 数据表

数据列表允许您创建一组可从中访问(并自动完成)的。这些元素类似于元素,但有更多的菜单样式限制和差异。虽然大多数浏览器和操作系统都支持 元素,但它们的样式最多也不一致。

进一步了解对datalist元素的支持。

Datalist example Sass Variables

$input-* 在大多数表单控件(而不是按钮)中共享。

$input-padding-y: $input-btn-padding-y; $input-padding-x: $input-btn-padding-x; $input-font-family: $input-btn-font-family; $input-font-size: $input-btn-font-size; $input-font-weight: $font-weight-base; $input-line-height: $input-btn-line-height; $input-padding-y-sm: $input-btn-padding-y-sm; $input-padding-x-sm: $input-btn-padding-x-sm; $input-font-size-sm: $input-btn-font-size-sm; $input-padding-y-lg: $input-btn-padding-y-lg; $input-padding-x-lg: $input-btn-padding-x-lg; $input-font-size-lg: $input-btn-font-size-lg; $input-bg: $white; $input-disabled-bg: $gray-200; $input-disabled-border-color: null; $input-color: $body-color; $input-border-color: $gray-400; $input-border-width: $input-btn-border-width; $input-box-shadow: $box-shadow-inset; $input-border-radius: $border-radius; $input-border-radius-sm: $border-radius-sm; $input-border-radius-lg: $border-radius-lg; $input-focus-bg: $input-bg; $input-focus-border-color: tint-color($component-active-bg, 50%); $input-focus-color: $input-color; $input-focus-width: $input-btn-focus-width; $input-focus-box-shadow: $input-btn-focus-box-shadow; $input-placeholder-color: $gray-600; $input-plaintext-color: $body-color; $input-height-border: $input-border-width * 2; $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2); $input-height-inner-half: add($input-line-height * .5em, $input-padding-y); $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2); $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)); $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)); $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)); $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-label-* 和 $form-text-* 用于 和 .form-text 组件。

$form-label-margin-bottom: .5rem; $form-label-font-size: null; $form-label-font-style: null; $form-label-font-weight: null; $form-label-color: null; $form-text-margin-top: .25rem; $form-text-font-size: $small-font-size; $form-text-font-style: null; $form-text-font-weight: null; $form-text-color: $text-muted;


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3